
<template>
    <Tabs  @on-click="changeTab" :value="tab_name">
        <TabPane label="详情" name="summary">
            <Card v-model="detail" style="margin-bottom: 10px;height:800px;overflow:auto">
                <div class="box">
                    <div class="column-1"  style="float: left;">
                        <span>名称:</span><pre>{{ detail.name }}</pre>
                        <span>压测类型:</span><pre>{{ detail.ptype }}</pre>
                        <span>服务器类型:</span><pre>{{ detail.target_type }}</pre>
                        <span>服务器描述:</span><pre>{{ detail.target_detail }}</pre>
                        <!-- <span>状态:</span><pre>{{ detail.status }}</pre>  -->
                        <span>创建时间:</span><pre>{{ detail.create_time }}</pre>
                    </div>
                    <div class="column-2">
                        <span>压测工具:</span><pre>{{ detail.tools }}</pre>
                        <span>工具描述:</span><pre>{{ detail.tools_detail }}</pre>

                    </div> 
                </div>
            </Card>
        </TabPane>
    </Tabs>
</template>


<script>

import { pressure_setting_detail} from  '@/api'
import { post } from '@/api/http'
export default {
    data() {
        return {
            detail: {
                name: '',
                ptype: '',
                target_type:'',
                target_detail:'',
                tools: '',
                tools_detail: '',
                extend1: '',
                extend2: '',
                extend3: '',
                create_time: null,
            },
            // tab切换
            tab_name: "summary"
        }
    },
    methods: {
        // 切换tab点击事件
        changeTab(name){
            this.tab_name = name
            localStorage.setItem("pressure_setting_detail_tab_name",name)
        },
        refresh() {
            // bug 切换命名空间 刷新 没效果， 其实是应该在详情页 屏蔽命名空间的select
            let query = this.$router.currentRoute.query
            let data = {"id":query.id}

            post(pressure_setting_detail,data).then( (response) => {
                // console.log(response.data);
                this.detail = response.data

            })

        }
    },
    mounted: function() {
        this.refresh()
        let tab = localStorage.getItem("pressure_setting_detail_tab_name")
        if(tab) {
            console.log("刷新加载的tab:",tab)
            this.tab_name = tab
        }
    }
}
</script>
<style scoped>
    span {
        color: purple;
    }
    .box {
        display: flex;
        display: -webkit-flex; 
    }

    .column-2 {
        flex:1;
    } 

    .column-1,.column-2,.column-3 {
        box-sizing: border-box;
    }
</style>
<style >
    pre{
        margin-left:40px;
        white-space: pre-wrap!important;
        word-wrap: break-word!important;
        *white-space:normal!important;
    }
</style>